<template>
  <div class="date-choose__container">
    <div class="date-choose__picker" @click="showDate">{{currentDate}}</div>
    <ul class="date-choose-type">
      <li class="date-choose-type__item" v-bind:class="{hover: dateType == 'year'}" @click="changeDateType('year')">年
      </li>
      <li class="date-choose-type__item" v-bind:class="{hover: dateType == 'month'}" @click="changeDateType('month')">月
      </li>
      <li class="date-choose-type__item" v-bind:class="{hover: dateType == 'day'}" @click="changeDateType('day')">日</li>
    </ul>
    <van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker v-model="chooseDate" :type="dateTypeVal" @confirm="confirmDate" @cancel="cancelDate" />
    </van-popup>
    <van-popup v-model="yearShow" position="bottom">
      <van-picker show-toolbar title="选择年份" :columns="yearColumns" @cancel="onYearCancel" @confirm="onYearConfirm" />
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        chooseDate: new Date(),
        dateShow: false,
        yearShow: false,
        currentDate: new Date().Format('yyyy'),
        dateType: 'year',
        yearColumns: [2019, 2020, 2021, 2022, 2023, 2024, 2025]
      }
    },
    computed: {
      dateTypeVal() {
        if (this.dateType == 'month') {
          return 'year-month'
        } else if (this.dateType == 'day') {
          return 'date'
        } else if (this.dateType == 'year') {
          return 'year'
        }
      }
    },
    methods: {
      showDate() {
        if(this.dateType == 'year'){
          this.yearShow = true
        }else{
          this.dateShow = true;
        }
      },
      confirmDate(val) {
        if (this.dateType == 'month') {
          this.currentDate = val.Format('yyyy/MM');
        } else if (this.dateType == 'day') {
          this.currentDate = val.Format('yyyy/MM/dd');
        } /* else if (this.dateType == 'year') {
          this.currentDate = val.Format('yyyy');
        } */
        this.dateShow = false;
        this.$emit('dateChange', {
          date: this.currentDate,
          type: this.dateType
        });
      },
      cancelDate() {
        this.dateShow = false;
      },
      //改变日期类型
      changeDateType(type) {
        this.dateType = type;
        if (this.dateType == 'month') {
          this.currentDate = new Date().Format('yyyy/MM');
        } else if (this.dateType == 'day') {
          this.currentDate = new Date().Format('yyyy/MM/dd');
        } else if (this.dateType == 'year') {
          this.currentDate = new Date().Format('yyyy');
        }
        this.$emit('dateChange', {
          date: this.currentDate,
          type: this.dateType
        });
      },
      onYearCancel() {
        this.yearShow = false;
      },
      onYearConfirm(value, index) {
        this.currentDate = value;
        this.yearShow = false;
        this.$emit('dateChange', {
          date: this.currentDate,
          type: this.dateType
        });
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../styles/variable.less';

  .date-choose__container {
    display: flex;
    justify-content: space-between;

    .date-choose__picker {
      padding: 0 15px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      background: #ffffff;
      font-size: 14px;
    }

    .date-choose-type {
      display: flex;
      background: #fff;
      border-radius: 12px;

      .date-choose-type__item {
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        font-size: 12px;

        &.hover {
          background: @col-the;
          color: #fff;
        }
      }
    }
  }

</style>
